<template>
  <div class="hello">
    <div class="d1"><img class="img1" src="../assets/maoyandy.png"><span v-if="!showinfo" class="roulink"><router-link to="login" @click="logined()">登录</router-link>&nbsp;&nbsp;<router-link to="regist">注册</router-link></span><span class="zs" v-if="showinfo">你好{{uname}},<button @click="logout()">注销</button></span></div>
    <div class="d2"></div>
    <!-- <div class="top"><router-link to="login">登录</router-link>&nbsp;&nbsp;<router-link to="regist">注册</router-link></div> -->
    <div>
      <Carousel autoplay v-model="value2" loop>
        <CarouselItem>
          <div class="demo-carousel">
            <img
              class="iag"
              src="http://qjvplq3iu.hd-bkt.clouddn.com/lb1.jpg"
            />
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <img
              class="iag"
              src="http://qjvplq3iu.hd-bkt.clouddn.com/lb2.jpg"
            />
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <img
              class="iag"
              src="http://qjvplq3iu.hd-bkt.clouddn.com/lb3.jpg"
            />
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="demo-carousel">
            <img
              class="iag"
              src="http://qjvplq3iu.hd-bkt.clouddn.com/lb4.jpg"
            />
          </div>
        </CarouselItem>
      </Carousel>
    </div>
    <div class="s1">正在热映</div>
    <div>
      <span class="c1" v-for="s in allData"
        ><img class="ig" v-bind:src="s.mpic" /><button @click="islogin(s.mid)">购票</button></span
      >
    </div>
    <div class="s1">即将上映</div>
    <div>
      <span class="c1" v-for="s in allData"
        ><img class="ig" v-bind:src="s.mpic" /><button @click="islogin(s.mid)">购票</button></span
      >
    </div>
    <div>footer</div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data() {
    return {
      allData: {
      },
      mid:'',
      uname: '',
      showinfo: false,
      value2: 0,
    };
  },
  methods: {
    logout: function(){
        this.uname='';
         this.$router.go(0)
    },
    islogin: function(mid){
      alert(mid)
      if(this.uname===null || this.uname===undefined || this.uname===""){
        this.$router.push("login")
      }else{
        this.$router.push({name:'details',params:{mid:mid}})
      }
    },
    getAllMovie: function(){
      axios.get("api/movie/getAll").then(res=>{
        console.log(res.data)
        this.allData=res.data
        console.log(this.allData)
      })
    },
    change: function(){
      if(this.uname!==null && this.uname!==undefined && this.uname===""){
      this.showinfo= true
      }
    }
  },
  mounted(){
    this.uname=this.$route.params.uname
    alert(this.uname)
     if(this.uname!==null && this.uname!==undefined && this.uname!==""){
      this.showinfo= true
      }
    this.getAllMovie();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.zs{
  font-size: 30px;
  color: royalblue;
}
.roulink{
    margin-left: 100px;
    font-size: 30px;
}
.img1 {
    width: 115px;
    height: 40px;
    margin-left: -950px;
    margin-top: 10px;
}
.d1 {
  /* background-color: aqua; */
  width: 100%;
  height: 60px;
  border-bottom: red solid 3px;
}
.top{
  background-color: aqua;
  height: 60px;
}
.hello {
  background-color: rgb(167, 173, 132);
}
.ig {
  width: 18%;
  height: 15%;
}
.iag {
  width: 60%;
  height: 10%;
}
.s1 {
  margin-left: 10px;
  font-size: 30px;
  padding-right: 70%;
}
.c1 {
  font-size: 20px;
  color: rgb(90, 20, 220);
}
</style>
